<script setup lang="ts">
/**
 * 设置页面组件
 * 提供用户偏好设置、主题配置、数据管理等功能
 */

import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { 
  ArrowLeft, 
  Moon, 
  Sun, 
  Monitor,
  Bell,
  Download,
  Upload,
  Trash2,
  RefreshCw,
  Globe,
  Clock,
  Eye,
  Palette,
  Database,
  Shield,
  Info,
  Check,
  X,
  AlertTriangle
} from 'lucide-vue-next';
import { useRSSStore } from '@/stores/useRSSStore';
import type { UserSettings } from '@/types';

// 路由实例
const router = useRouter();

// RSS Store
const rssStore = useRSSStore();

// 响应式数据
const activeTab = ref('general');
const showExportModal = ref(false);
const showImportModal = ref(false);
const showClearDataModal = ref(false);
const isExporting = ref(false);
const isImporting = ref(false);
const isClearingData = ref(false);
const importFile = ref<File | null>(null);
const importResult = ref<{ success: boolean; message: string } | null>(null);

// 设置表单数据
const settingsForm = ref<UserSettings>({
  theme: 'light',
  language: 'zh-CN',
  autoRefresh: true,
  refreshInterval: 30,
  notificationsEnabled: true,
  showUnreadOnly: false,
  articlesPerPage: 20,
  defaultView: 'list',
  fontSize: 'medium',
  readingMode: 'comfortable',
  markAsReadOnScroll: true,
  openLinksInNewTab: true,
  enableKeyboardShortcuts: true,
  compactMode: false,
  showImages: true,
  enableDarkMode: false,
  autoMarkAsRead: false,
  syncSettings: true,
});

// 计算属性
const tabs = computed(() => [
  { id: 'general', name: '常规设置', icon: Monitor },
  { id: 'reading', name: '阅读设置', icon: Eye },
  { id: 'notifications', name: '通知设置', icon: Bell },
  { id: 'data', name: '数据管理', icon: Database },
  { id: 'about', name: '关于', icon: Info },
]);

const themeOptions = computed(() => [
  { value: 'light', label: '浅色主题', icon: Sun },
  { value: 'dark', label: '深色主题', icon: Moon },
  { value: 'auto', label: '跟随系统', icon: Monitor },
]);

const languageOptions = computed(() => [
  { value: 'zh-CN', label: '简体中文' },
  { value: 'en-US', label: 'English' },
  { value: 'ja-JP', label: '日本語' },
]);

const refreshIntervalOptions = computed(() => [
  { value: 5, label: '5分钟' },
  { value: 15, label: '15分钟' },
  { value: 30, label: '30分钟' },
  { value: 60, label: '1小时' },
  { value: 180, label: '3小时' },
  { value: 360, label: '6小时' },
]);

const fontSizeOptions = computed(() => [
  { value: 'small', label: '小' },
  { value: 'medium', label: '中' },
  { value: 'large', label: '大' },
  { value: 'extra-large', label: '特大' },
]);

const viewOptions = computed(() => [
  { value: 'list', label: '列表视图' },
  { value: 'card', label: '卡片视图' },
  { value: 'magazine', label: '杂志视图' },
]);

const readingModeOptions = computed(() => [
  { value: 'comfortable', label: '舒适' },
  { value: 'compact', label: '紧凑' },
  { value: 'spacious', label: '宽松' },
]);

/**
 * 返回首页
 */
const goBack = () => {
  router.push('/');
};

/**
 * 保存设置
 */
const saveSettings = async () => {
  try {
    await rssStore.updateSettings(settingsForm.value);
    // 显示保存成功提示
    console.log('设置已保存');
  } catch (error) {
    console.error('保存设置失败:', error);
  }
};

/**
 * 重置设置为默认值
 */
const resetSettings = async () => {
  if (!confirm('确定要重置所有设置为默认值吗？')) {
    return;
  }
  
  try {
    const defaultSettings: UserSettings = {
      theme: 'light',
      language: 'zh-CN',
      autoRefresh: true,
      refreshInterval: 30,
      notificationsEnabled: true,
      showUnreadOnly: false,
      articlesPerPage: 20,
      defaultView: 'list',
      fontSize: 'medium',
      readingMode: 'comfortable',
      markAsReadOnScroll: true,
      openLinksInNewTab: true,
      enableKeyboardShortcuts: true,
      compactMode: false,
      showImages: true,
      enableDarkMode: false,
      autoMarkAsRead: false,
      syncSettings: true,
    };
    
    settingsForm.value = { ...defaultSettings };
    await saveSettings();
  } catch (error) {
    console.error('重置设置失败:', error);
  }
};

/**
 * 导出数据
 */
const exportData = async () => {
  try {
    isExporting.value = true;
    
    const exportData = {
      version: '1.0.0',
      timestamp: new Date().toISOString(),
      feeds: rssStore.feeds,
      categories: rssStore.categories,
      settings: rssStore.settings,
      articles: rssStore.articles.slice(0, 1000), // 限制导出文章数量
    };
    
    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
      type: 'application/json',
    });
    
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `rss-reader-backup-${new Date().toISOString().split('T')[0]}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    
    showExportModal.value = false;
  } catch (error) {
    console.error('导出数据失败:', error);
  } finally {
    isExporting.value = false;
  }
};

/**
 * 处理文件选择
 * @param {Event} event - 文件选择事件
 */
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  
  if (file) {
    importFile.value = file;
    importResult.value = null;
  }
};

/**
 * 导入数据
 */
const importData = async () => {
  if (!importFile.value) {
    importResult.value = {
      success: false,
      message: '请选择要导入的文件',
    };
    return;
  }
  
  try {
    isImporting.value = true;
    
    const text = await importFile.value.text();
    const data = JSON.parse(text);
    
    // 验证数据格式
    if (!data.version || !data.feeds || !data.categories) {
      throw new Error('无效的备份文件格式');
    }
    
    // 导入数据
    await rssStore.importData(data);
    
    importResult.value = {
      success: true,
      message: '数据导入成功！',
    };
    
    setTimeout(() => {
      showImportModal.value = false;
      importResult.value = null;
      importFile.value = null;
    }, 2000);
    
  } catch (error) {
    importResult.value = {
      success: false,
      message: `导入失败: ${error instanceof Error ? error.message : '未知错误'}`,
    };
  } finally {
    isImporting.value = false;
  }
};

/**
 * 清除所有数据
 */
const clearAllData = async () => {
  if (!confirm('确定要清除所有数据吗？此操作不可恢复！')) {
    return;
  }
  
  try {
    isClearingData.value = true;
    await rssStore.clearAllData();
    showClearDataModal.value = false;
  } catch (error) {
    console.error('清除数据失败:', error);
  } finally {
    isClearingData.value = false;
  }
};

/**
 * 刷新所有RSS源
 */
const refreshAllFeeds = async () => {
  try {
    await rssStore.refreshAllFeeds();
  } catch (error) {
    console.error('刷新RSS源失败:', error);
  }
};

/**
 * 获取应用统计信息
 */
const getAppStats = computed(() => {
  const totalArticles = rssStore.articles.length;
  const unreadArticles = rssStore.articles.filter(article => !article.isRead).length;
  const totalFeeds = rssStore.feeds.length;
  const enabledFeeds = rssStore.feeds.filter(feed => feed.isActive).length;
  
  return {
    totalArticles,
    unreadArticles,
    totalFeeds,
    enabledFeeds,
    readPercentage: totalArticles > 0 ? Math.round(((totalArticles - unreadArticles) / totalArticles) * 100) : 0,
  };
});

// 组件挂载时初始化数据
onMounted(() => {
  // 加载当前设置
  if (rssStore.settings) {
    settingsForm.value = { ...rssStore.settings };
  }
});
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-blue-100 shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <!-- 返回按钮和标题 -->
          <div class="flex items-center space-x-4">
            <button
              @click="goBack"
              class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
            >
              <ArrowLeft class="w-5 h-5" />
              <span>返回</span>
            </button>
            
            <div>
              <h1 class="text-xl font-bold text-gray-900">设置</h1>
              <p class="text-sm text-gray-500">个性化您的RSS阅读体验</p>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="flex items-center space-x-3">
            <button
              @click="resetSettings"
              class="flex items-center space-x-2 px-4 py-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all duration-200"
            >
              <RefreshCw class="w-4 h-4" />
              <span>重置</span>
            </button>
            
            <button
              @click="saveSettings"
              class="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-all duration-200"
            >
              <Check class="w-4 h-4" />
              <span>保存设置</span>
            </button>
          </div>
        </div>
      </div>
    </header>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- 左侧边栏 - 设置导航 -->
        <div class="lg:col-span-1">
          <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">设置导航</h2>
            
            <nav class="space-y-2">
              <button
                v-for="tab in tabs"
                :key="tab.id"
                @click="activeTab = tab.id"
                :class="[
                  'w-full text-left p-3 rounded-xl transition-all duration-200 flex items-center space-x-3',
                  activeTab === tab.id
                    ? 'bg-blue-100 text-blue-700 shadow-md'
                    : 'hover:bg-blue-50 text-gray-700'
                ]"
              >
                <component :is="tab.icon" class="w-5 h-5" />
                <span class="font-medium">{{ tab.name }}</span>
              </button>
            </nav>
          </div>
        </div>

        <!-- 主内容区域 -->
        <div class="lg:col-span-3">
          <!-- 常规设置 -->
          <div v-if="activeTab === 'general'" class="space-y-6">
            <!-- 主题设置 -->
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <div class="flex items-center space-x-3 mb-4">
                <Palette class="w-5 h-5 text-blue-600" />
                <h3 class="text-lg font-semibold text-gray-900">主题设置</h3>
              </div>
              
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div
                  v-for="theme in themeOptions"
                  :key="theme.value"
                  @click="settingsForm.theme = theme.value as 'light' | 'dark' | 'auto'"
                  :class="[
                    'p-4 border-2 rounded-xl cursor-pointer transition-all duration-200',
                    settingsForm.theme === theme.value
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200 hover:border-blue-300'
                  ]"
                >
                  <div class="flex flex-col items-center space-y-2">
                    <component :is="theme.icon" class="w-8 h-8 text-gray-600" />
                    <span class="font-medium text-gray-900">{{ theme.label }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 语言设置 -->
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <div class="flex items-center space-x-3 mb-4">
                <Globe class="w-5 h-5 text-blue-600" />
                <h3 class="text-lg font-semibold text-gray-900">语言设置</h3>
              </div>
              
              <select
                v-model="settingsForm.language"
                class="w-full px-4 py-3 bg-blue-50/50 border border-blue-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
              >
                <option 
                  v-for="lang in languageOptions" 
                  :key="lang.value" 
                  :value="lang.value"
                >
                  {{ lang.label }}
                </option>
              </select>
            </div>

            <!-- 自动刷新设置 -->
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <div class="flex items-center space-x-3 mb-4">
                <Clock class="w-5 h-5 text-blue-600" />
                <h3 class="text-lg font-semibold text-gray-900">自动刷新</h3>
              </div>
              
              <div class="space-y-4">
                <label class="flex items-center space-x-3">
                  <input
                    v-model="settingsForm.autoRefresh"
                    type="checkbox"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span class="text-gray-700">启用自动刷新RSS源</span>
                </label>
                
                <div v-if="settingsForm.autoRefresh" class="ml-8">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    刷新间隔
                  </label>
                  <select
                    v-model="settingsForm.refreshInterval"
                    class="w-full px-4 py-3 bg-blue-50/50 border border-blue-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                    <option 
                      v-for="interval in refreshIntervalOptions" 
                      :key="interval.value" 
                      :value="interval.value"
                    >
                      {{ interval.label }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <!-- 阅读设置 -->
          <div v-if="activeTab === 'reading'" class="space-y-6">
            <!-- 显示设置 -->
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <div class="flex items-center space-x-3 mb-4">
                <Eye class="w-5 h-5 text-blue-600" />
                <h3 class="text-lg font-semibold text-gray-900">显示设置</h3>
              </div>
              
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    默认视图
                  </label>
                  <select
                    v-model="settingsForm.defaultView"
                    class="w-full px-4 py-3 bg-blue-50/50 border border-blue-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                    <option 
                      v-for="view in viewOptions" 
                      :key="view.value" 
                      :value="view.value"
                    >
                      {{ view.label }}
                    </option>
                  </select>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    字体大小
                  </label>
                  <select
                    v-model="settingsForm.fontSize"
                    class="w-full px-4 py-3 bg-blue-50/50 border border-blue-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                    <option 
                      v-for="size in fontSizeOptions" 
                      :key="size.value" 
                      :value="size.value"
                    >
                      {{ size.label }}
                    </option>
                  </select>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    阅读模式
                  </label>
                  <select
                    v-model="settingsForm.readingMode"
                    class="w-full px-4 py-3 bg-blue-50/50 border border-blue-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  >
                    <option 
                      v-for="mode in readingModeOptions" 
                      :key="mode.value" 
                      :value="mode.value"
                    >
                      {{ mode.label }}
                    </option>
                  </select>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    每页文章数
                  </label>
                  <input
                    v-model.number="settingsForm.articlesPerPage"
                    type="number"
                    min="10"
                    max="100"
                    step="10"
                    class="w-full px-4 py-3 bg-blue-50/50 border border-blue-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                  />
                </div>
              </div>
            </div>

            <!-- 阅读行为设置 -->
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">阅读行为</h3>
              
              <div class="space-y-4">
                <label class="flex items-center space-x-3">
                  <input
                    v-model="settingsForm.showUnreadOnly"
                    type="checkbox"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span class="text-gray-700">只显示未读文章</span>
                </label>
                
                <label class="flex items-center space-x-3">
                  <input
                    v-model="settingsForm.markAsReadOnScroll"
                    type="checkbox"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span class="text-gray-700">滚动时自动标记为已读</span>
                </label>
                
                <label class="flex items-center space-x-3">
                  <input
                    v-model="settingsForm.autoMarkAsRead"
                    type="checkbox"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span class="text-gray-700">打开文章时自动标记为已读</span>
                </label>
                
                <label class="flex items-center space-x-3">
                  <input
                    v-model="settingsForm.openLinksInNewTab"
                    type="checkbox"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span class="text-gray-700">在新标签页中打开链接</span>
                </label>
                
                <label class="flex items-center space-x-3">
                  <input
                    v-model="settingsForm.showImages"
                    type="checkbox"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span class="text-gray-700">显示文章图片</span>
                </label>
                
                <label class="flex items-center space-x-3">
                  <input
                    v-model="settingsForm.enableKeyboardShortcuts"
                    type="checkbox"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span class="text-gray-700">启用键盘快捷键</span>
                </label>
              </div>
            </div>
          </div>

          <!-- 通知设置 -->
          <div v-if="activeTab === 'notifications'" class="space-y-6">
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <div class="flex items-center space-x-3 mb-4">
                <Bell class="w-5 h-5 text-blue-600" />
                <h3 class="text-lg font-semibold text-gray-900">通知设置</h3>
              </div>
              
              <div class="space-y-4">
                <label class="flex items-center space-x-3">
                  <input
                    v-model="settingsForm.notificationsEnabled"
                    type="checkbox"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span class="text-gray-700">启用桌面通知</span>
                </label>
                
                <div v-if="settingsForm.notificationsEnabled" class="ml-8 space-y-3">
                  <p class="text-sm text-gray-600">
                    当有新文章时，您将收到桌面通知。请确保浏览器已允许通知权限。
                  </p>
                  
                  <button
                    @click="refreshAllFeeds"
                    class="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-all duration-200"
                  >
                    <Bell class="w-4 h-4" />
                    <span>测试通知</span>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据管理 -->
          <div v-if="activeTab === 'data'" class="space-y-6">
            <!-- 统计信息 -->
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <div class="flex items-center space-x-3 mb-4">
                <Database class="w-5 h-5 text-blue-600" />
                <h3 class="text-lg font-semibold text-gray-900">数据统计</h3>
              </div>
              
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center p-4 bg-blue-50 rounded-xl">
                  <div class="text-2xl font-bold text-blue-600">{{ getAppStats.totalFeeds }}</div>
                  <div class="text-sm text-gray-600">RSS源总数</div>
                </div>
                
                <div class="text-center p-4 bg-green-50 rounded-xl">
                  <div class="text-2xl font-bold text-green-600">{{ getAppStats.enabledFeeds }}</div>
                  <div class="text-sm text-gray-600">启用的RSS源</div>
                </div>
                
                <div class="text-center p-4 bg-purple-50 rounded-xl">
                  <div class="text-2xl font-bold text-purple-600">{{ getAppStats.totalArticles }}</div>
                  <div class="text-sm text-gray-600">文章总数</div>
                </div>
                
                <div class="text-center p-4 bg-orange-50 rounded-xl">
                  <div class="text-2xl font-bold text-orange-600">{{ getAppStats.unreadArticles }}</div>
                  <div class="text-sm text-gray-600">未读文章</div>
                </div>
              </div>
              
              <div class="mt-4 p-4 bg-gray-50 rounded-xl">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-sm text-gray-600">阅读进度</span>
                  <span class="text-sm font-medium text-gray-900">{{ getAppStats.readPercentage }}%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div 
                    class="bg-blue-600 h-2 rounded-full transition-all duration-300"
                    :style="{ width: `${getAppStats.readPercentage}%` }"
                  ></div>
                </div>
              </div>
            </div>

            <!-- 数据操作 -->
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">数据操作</h3>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <button
                  @click="showExportModal = true"
                  class="flex flex-col items-center p-4 border border-gray-200 rounded-xl hover:border-blue-300 hover:bg-blue-50 transition-all duration-200"
                >
                  <Download class="w-8 h-8 text-blue-600 mb-2" />
                  <span class="font-medium text-gray-900">导出数据</span>
                  <span class="text-sm text-gray-500 text-center">备份您的RSS源和设置</span>
                </button>
                
                <button
                  @click="showImportModal = true"
                  class="flex flex-col items-center p-4 border border-gray-200 rounded-xl hover:border-blue-300 hover:bg-blue-50 transition-all duration-200"
                >
                  <Upload class="w-8 h-8 text-green-600 mb-2" />
                  <span class="font-medium text-gray-900">导入数据</span>
                  <span class="text-sm text-gray-500 text-center">从备份文件恢复数据</span>
                </button>
                
                <button
                  @click="showClearDataModal = true"
                  class="flex flex-col items-center p-4 border border-gray-200 rounded-xl hover:border-red-300 hover:bg-red-50 transition-all duration-200"
                >
                  <Trash2 class="w-8 h-8 text-red-600 mb-2" />
                  <span class="font-medium text-gray-900">清除数据</span>
                  <span class="text-sm text-gray-500 text-center">删除所有RSS源和文章</span>
                </button>
              </div>
            </div>
          </div>

          <!-- 关于 -->
          <div v-if="activeTab === 'about'" class="space-y-6">
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl shadow-lg border border-blue-100 p-6">
              <div class="flex items-center space-x-3 mb-4">
                <Info class="w-5 h-5 text-blue-600" />
                <h3 class="text-lg font-semibold text-gray-900">关于RSS阅读器</h3>
              </div>
              
              <div class="space-y-4">
                <div class="text-center py-8">
                  <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Globe class="w-8 h-8 text-blue-600" />
                  </div>
                  <h4 class="text-xl font-bold text-gray-900 mb-2">RSS阅读器</h4>
                  <p class="text-gray-600 mb-4">版本 1.0.0</p>
                  <p class="text-gray-500 max-w-md mx-auto">
                    一个现代化的RSS阅读器，帮助您轻松订阅和阅读您喜爱的内容。
                  </p>
                </div>
                
                <div class="border-t border-gray-200 pt-4">
                  <h5 class="font-semibold text-gray-900 mb-2">功能特性</h5>
                  <ul class="space-y-1 text-gray-600">
                    <li>• 支持RSS和Atom订阅源</li>
                    <li>• 智能文章分类和标签</li>
                    <li>• 离线阅读支持</li>
                    <li>• 多种阅读视图</li>
                    <li>• 数据导入导出</li>
                    <li>• 响应式设计</li>
                  </ul>
                </div>
                
                <div class="border-t border-gray-200 pt-4">
                  <h5 class="font-semibold text-gray-900 mb-2">技术栈</h5>
                  <div class="flex flex-wrap gap-2">
                    <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">Vue 3</span>
                    <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">TypeScript</span>
                    <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Vite</span>
                    <span class="px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-sm">Tailwind CSS</span>
                    <span class="px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm">Zustand</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 导出数据模态框 -->
    <div v-if="showExportModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div 
          class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
          @click="showExportModal = false"
        ></div>

        <div class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">导出数据</h3>
            <button
              @click="showExportModal = false"
              class="p-2 text-gray-400 hover:text-gray-600 rounded-lg"
            >
              <X class="w-5 h-5" />
            </button>
          </div>

          <div class="space-y-4">
            <p class="text-gray-600">
              导出您的RSS源、分类、设置和最近的文章数据。导出的文件可以用于备份或迁移到其他设备。
            </p>
            
            <div class="bg-blue-50 p-4 rounded-lg">
              <h4 class="font-medium text-blue-900 mb-2">导出内容包括：</h4>
              <ul class="text-sm text-blue-700 space-y-1">
                <li>• 所有RSS源和分类</li>
                <li>• 用户设置和偏好</li>
                <li>• 最近1000篇文章</li>
                <li>• 阅读状态和收藏</li>
              </ul>
            </div>

            <div class="flex justify-end space-x-3 pt-4">
              <button
                @click="showExportModal = false"
                class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200"
              >
                取消
              </button>
              <button
                @click="exportData"
                :disabled="isExporting"
                class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {{ isExporting ? '导出中...' : '开始导出' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 导入数据模态框 -->
    <div v-if="showImportModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div 
          class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
          @click="showImportModal = false"
        ></div>

        <div class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">导入数据</h3>
            <button
              @click="showImportModal = false"
              class="p-2 text-gray-400 hover:text-gray-600 rounded-lg"
            >
              <X class="w-5 h-5" />
            </button>
          </div>

          <div class="space-y-4">
            <p class="text-gray-600">
              选择之前导出的备份文件来恢复您的数据。导入将会覆盖当前的所有数据。
            </p>
            
            <div class="bg-yellow-50 p-4 rounded-lg">
              <div class="flex items-start space-x-2">
                <AlertTriangle class="w-5 h-5 text-yellow-600 mt-0.5" />
                <div>
                  <h4 class="font-medium text-yellow-900">注意事项</h4>
                  <p class="text-sm text-yellow-700 mt-1">
                    导入操作将会覆盖当前的所有数据，建议先导出当前数据作为备份。
                  </p>
                </div>
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                选择备份文件
              </label>
              <input
                type="file"
                accept=".json"
                @change="handleFileSelect"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            
            <div v-if="importResult" :class="[
              'p-3 rounded-lg flex items-center space-x-2',
              importResult.success ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
            ]">
              <Check v-if="importResult.success" class="w-4 h-4" />
              <X v-else class="w-4 h-4" />
              <span class="text-sm">{{ importResult.message }}</span>
            </div>

            <div class="flex justify-end space-x-3 pt-4">
              <button
                @click="showImportModal = false"
                class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200"
              >
                取消
              </button>
              <button
                @click="importData"
                :disabled="isImporting || !importFile"
                class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {{ isImporting ? '导入中...' : '开始导入' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 清除数据确认模态框 -->
    <div v-if="showClearDataModal" class="fixed inset-0 z-50 overflow-y-auto">
      <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div 
          class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
          @click="showClearDataModal = false"
        ></div>

        <div class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">清除所有数据</h3>
            <button
              @click="showClearDataModal = false"
              class="p-2 text-gray-400 hover:text-gray-600 rounded-lg"
            >
              <X class="w-5 h-5" />
            </button>
          </div>

          <div class="space-y-4">
            <div class="bg-red-50 p-4 rounded-lg">
              <div class="flex items-start space-x-2">
                <AlertTriangle class="w-5 h-5 text-red-600 mt-0.5" />
                <div>
                  <h4 class="font-medium text-red-900">危险操作</h4>
                  <p class="text-sm text-red-700 mt-1">
                    此操作将永久删除所有RSS源、文章、分类和设置。此操作不可恢复！
                  </p>
                </div>
              </div>
            </div>
            
            <p class="text-gray-600">
              如果您确定要继续，请在下方输入框中输入 "确认清除" 来确认操作。
            </p>
            
            <input
              type="text"
              placeholder="请输入：确认清除"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
            />

            <div class="flex justify-end space-x-3 pt-4">
              <button
                @click="showClearDataModal = false"
                class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200"
              >
                取消
              </button>
              <button
                @click="clearAllData"
                :disabled="isClearingData"
                class="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {{ isClearingData ? '清除中...' : '确认清除' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>